<template>
<Modal :value="theValue" title="资源库" @on-cancel="cancel">
    <resource-core v-if="theValue"
        :ref="coreId"
        :is-only-folder="isOnlyFolder"
        :file-type="fileType"
        :show-type="showType"
        :operable="operable"
        :selectable="selectable"
        @on-select-change="handleOnSelectChange"
    ></resource-core>

    <div slot="footer">
        <Button type="primary" @click="ok" :disabled="selectedFileItems.length==0">确定</Button>
        <Button @click="cancel">取消</Button>
    </div>
</Modal>
</template>

<script lang="ts">
import ResourceCore from './resource-core'

export default {
    props: {
        value: {
            type: Boolean,
            default: false
        },
        isOnlyFolder: {
            type: Boolean,
            default: false
        },
        fileType: {
            type: Number,
            default: 0 // 0:all, 1:image, 2:document, 3:video
        },
        showType: {
            type: String,
            default: "thumbnail" // list, thumbnail
        },
        operable: {
            type: Boolean,
            default: true
        },
        selectable: {
            type: String,
            default: "all" // all, file, folder
        }
    },
    components: {
        ResourceCore
    },
    data() {
        return {
            coreId: "resource-core-" + Date.now(),
            selectedItems: [],
            selectedFileItems: []
        }
    },
    computed: {
        theValue() {
            return this.value;
        }
    },
    methods: {
        ok() {
            //var selectedItems = this.$refs[this.coreId].getSelectedItems();
            if(this.selectedFileItems.length > 0) {
                this.$emit("on-selected", this.selectedFileItems);
                this.$refs[this.coreId].clearSelect();
            }
            this.closeModal();
        },
        cancel() {
            this.$refs[this.coreId].clearSelect();
            this.closeModal();
        },
        closeModal() {
            this.selectedItems = [];
            this.selectedFileItems = [];
            this.$emit('input', false);
        },
        handleOnSelectChange(item) {
            this.selectedItems = item;
            this.selectedFileItems = item.filter(elem => elem.isFolder == false);
        }
    }
}
</script>

<style>

</style>
